<template>
  <el-dialog title="选择客户" :visible="selectCustomerDialog" width="70%" class="customer-select"
    @close="selectCustomerClose">
    <div class="app-container customer-box">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <div class="custom-header">
            <el-form :inline="true" label-width="75px" style="margin-bottom: 15px;">
              <el-form-item label="客户名称">
                <el-input v-model="searchForm.name" clearable size="small" style="width: 240px" />
              </el-form-item>
              <el-form-item label="联系人">
                <el-input v-model="searchForm.contacts" clearable size="small" style="width: 240px" />
              </el-form-item>
              <el-form-item>
                <el-button v-hasPermi="['om:customer:query']" type="primary" icon="el-icon-search" @click="search">搜索
                </el-button>
                <el-button v-hasPermi="['om:customer:add']" type="success" :disabled="searchForm.name==''"
                  icon="el-icon-plus" @click="handleAdd">快速添加
                </el-button>
              </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" v-hasPermi="['om:customer:query']" plain icon="el-icon-menu" size="mini"
                  @click="checkleAll">查询所有</el-button>
              </el-col>
            </el-row>
          </div>
          <!-- 客户数据 -->
          <el-table :data="customerData" border v-loading="loading" :height="maxHeight"
            @row-dblclick="handleCustomerSelect">
            <el-table-column type="index" width="60" align="center" label="序号">
            </el-table-column>
            <el-table-column label="客户名称" align="center" prop="name" width="200">
            </el-table-column>
            <el-table-column label="简称" align="center" prop="shortName" width="150">
            </el-table-column>
            <el-table-column label="公司地址" align="center" prop="addr" width="300">
            </el-table-column>
            <el-table-column label="电话" align="center" prop="tel">
            </el-table-column>
            <el-table-column label="联系人" align="center" prop="contacts" />
            <el-table-column label="手机号" align="center" prop="mobile" />
            <el-table-column label="状态" align="center" key="status" width="100">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.status" active-value="0" disabled inactive-value="1"
                  @change="handleStatusChange(scope.row)"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding" width="100">
              <template slot-scope="scope">
                <div class="public-btn">
                  <el-button size="mini" type="text" @click.stop="handleCustomerSelect(scope.row)">选择
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 分页信息 -->
      <pagination v-show="total>=0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getCustomerlList" />
      <!-- 添加或修改参数配置对话框 -->
      <el-dialog title="客户" :visible.sync="open" width="600px" @close="close">
        <el-form ref="form" :model="customerForm" label-width="95px" :disabled="butChange=='seeStatus'">
          <el-row>
            <el-col :span="24">
              <el-form-item label="客户名称" prop="name">
                <el-input v-model="customerForm.name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="简称">
                <el-input v-model="customerForm.shortName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态">
                <el-radio-group v-model="customerForm.status">
                  <el-radio label="0">正常</el-radio>
                  <el-radio label="1">停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司地址">
                <el-input v-model="customerForm.addr" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮编">
                <el-input v-model="customerForm.postcode" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话">
                <el-input v-model="customerForm.tel" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注">
                <el-input v-model="customerForm.remark" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人">
                <el-input v-model="customerForm.contacts" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号">
                <el-input v-model="customerForm.mobile" />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="Billing-box">
            <el-row>
              <h2>开票信息</h2>
              <el-col :span="24">
                <el-form-item label="开户行">
                  <el-input v-model="customerForm.bank" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="地址电话">
                  <el-input v-model="customerForm.addr2" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="账号">
                  <el-input v-model="customerForm.account" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="税号">
                  <el-input v-model="customerForm.tax" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="butChange!=='seeStatus'">
          <el-button type="primary" v-if="butChange=='addStatus'" @click="submitForm('form')">确定</el-button>
          <el-button type="success" v-if="butChange=='updateStatus'" @click="submitForm('form')">保存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>
  import {
    listCustomer,
    materialSort,
    addCustomer
  } from "../../api/common";
  import {
    isSerial
  } from "@/utils/cingsoft";

  import {
    getToken
  } from "@/utils/auth";
  import print from "print-js"; //打印js
  export default {
    name: "Customer",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 客户查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 100,
          name: "",
          status: "0"
        },
        // 总条数
        total: 0,
        // 最大高度
        maxHeight: null,
        //客户数据
        customerData: [],
        //搜索参数
        searchForm: {
          name: "", //搜索客户名称
          contacts: "" //联系人
        },
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        customerForm: {
          name: "",
          shortName: "",
          status: "0",
          addr: "",
          sortId: "",
          tel: "",
          postcode: "",
          bank: "",
          addr2: "",
          account: "",
          tax: "",
        },
        // 材料大类
        optionsMaterials: [],
        selectMaterials: [],
        //弹框提交按钮状态，1（新增） 2（修改）
        butChange: ""
      }
    },
    props: {
      selectCustomerDialog: {
        type: Boolean,
        default: true
      }
    },
    mounted() {
      this.getCustomerlList();
    },
    methods: {
      // 获取客户数据
      getCustomerlList() {
        this.loading = true;
        listCustomer(this.queryParams).then(res => {
          if (res.code == 200) {
            this.loading = false;
            this.customerData = res.rows;
            this.total = res.total;
            this.maxHeight = (`${document.documentElement.clientHeight}` - 400);
          }

        })
      },

      // 弹框状态
      selectCustomerClose() {
        this.$emit("selectCustomerClose");
      },

      // 选择供方
      handleCustomerSelect(row) {
        this.$emit("handleCustomerSelect", row)
      },
      // 新增客户信息
      handleAdd() {
        addCustomer(this.searchForm).then(res => {
          if (res.code == 200) {
            this.msgSuccess("添加成功");
            this.searchForm.name = "";
            this.queryParams.name = "";
            this.searchForm.contacts = "";
            this.queryParams.contacts = "";
            this.getCustomerlList();
          }
        }).catch(err => {
          this.msgError("添加失败");
        })
      },
      //搜索
      search() {
        this.queryParams.contacts = this.searchForm.contacts;
        this.queryParams.name = this.searchForm.name;
        this.getCustomerlList();
      },

      // 查询所有
      checkleAll() {
        //清空搜索信息，避免干扰
        this.searchForm.name = "";
        this.queryParams.name = "";
        this.searchForm.contacts = "";
        this.queryParams.contacts = "";
        this.getCustomerlList()
      },

      // 查看客户信息
      handleSee(row) {
        this.customerForm = Object.assign({}, row); //拷贝物料信息
        this.butChange = "seeStatus";
        this.open = true;
      },

      // 修改客户信息
      handleUpdate(row) {
        this.customerForm = Object.assign({}, row); //拷贝物料信息
        this.butChange = "updateStatus";
        this.open = true;
      },
      /** 弹框取消 */
      cancel() {
        this.open = false;
        this.reset()
      },
      close() {
        this.reset()
      },

      /** 表单重置 */
      reset() {
        this.customerForm = {
          name: "",
          shortName: "",
          status: "0",
          addr: "",
          sortId: "",
          tel: "",
          postcode: "",
          bank: "",
          addr2: "",
          account: "",
          tax: "",
        };
        this.resetForm("form");
      },
    },

  };
</script>
<style lang="scss">
  .customer-in-dialog {
    .Billing-box {
      padding: 15px;
      box-shadow: 1px 1px 10px 1px #eee;
      border-radius: 5px;
      padding-bottom: 10px;
      margin: 10px 10px 0px 10px;

      h2 {
        font-size: 15px;
        font-weight: 700;
        margin: 0;
        border-bottom: 1px solid #dfe6ec;
        padding-bottom: 15px;
        margin-bottom: 15px;
      }
    }

    .el-input.is-disabled .el-input__inner {
      color: #333;
    }
  }

  .customer-select {
    .el-dialog__body {
      height: calc(100vh - 250px);
    }
    .custom-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .app-container {
      padding-top: 0;
    }

    .el-table {
      cursor: pointer;
    }

    .el-table__body {
      user-select: none;
    }

    .customer-box {
      .el-tag.el-tag--info {
        color: #1890FF;
      }

      .Billing-box {
        padding: 15px;
        box-shadow: 1px 1px 10px 1px #eee;
        border-radius: 5px;
        padding-bottom: 10px;
        margin: 10px 10px 0px 10px;

        h2 {
          font-size: 15px;
          font-weight: 700;
          margin: 0;
          border-bottom: 1px solid #dfe6ec;
          padding-bottom: 15px;
          margin-bottom: 15px;
        }
      }

      .el-switch {
        display: flex;
        justify-content: center;
      }

      .el-radio__input.is-disabled.is-checked .el-radio__inner {
        background-color: #F5F7FA;
        border-color: #999;
      }

      .el-radio {
        margin-right: 18px;
      }

      .el-radio__label {
        padding-left: 5px;
      }

      .el-radio:nth-of-type(3) {
        margin-right: 0;
      }

      .el-switch.is-disabled {
        opacity: 1;
      }

      .el-table .el-table__header-wrapper th,
      .el-table .el-table__fixed-header-wrapper th {
        height: 35px;
      }

      .el-dialog__body {
        padding-right: 15px;
        padding-bottom: 20px;

      }

      .el-input.is-disabled .el-input__inner {
        color: #333;
      }

      .el-form-item--medium .el-form-item__content {
        margin-right: 10px !important;
      }
    }

    .close-select {
      overflow: hidden;

      i {
        float: right;
        margin-right: 15px;
        color: #909399;
        cursor: pointer;
      }
    }

  }
</style>
